<template>
  <div class="login">
    <div class="van-nav-bar__content">
      <span @click="$router.back()"> 《 </span>
      <p>账号登录</p>
    </div>
    <van-cell-group ref="input" >
      <van-field v-model.trim="username" placeholder="请输入账号" />
    </van-cell-group>
    <van-cell-group>
      <van-field v-model.trim="password" placeholder="请输入密码" />
    </van-cell-group>
    <van-button type="primary" size="large" @click="loginFn">登 录</van-button>
  </div>
</template>

<script>
export default {
  name: 'HmVantH5HkLogin',
  data () {
    return {
      username: '',
      password: ''
    }
  },

  mounted () {},

  methods: {
    async loginFn () {
      if (this.password === '' || this.username === '') {
        alert('用户或者密码不能为空')
        this.$refs.input.style.color = 'red'
      } else {
        const res = await this.$http({
          url: '/user/login',
          method: 'POST',
          data: {
            username: this.username,
            password: this.password
          }
        })
        console.log(res)
        if (res.data.status === 200) {
          alert('登录成功')
          setTimeout(() => {
            this.$router.push('/shouye/index')
          }, 500)
        } else alert('用户或者密码错误')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar__content {
  display: flex;
  width: 375px;
  height: 46px;
  background-color: #21b97a;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  position: relative;
  span {
    position: absolute;
    left: 10px;
  }
}
.van-button {
  width: 337px;
  height: 50px;
  background-color: #21b97a;
  margin: 10px 0 0 20px;
}
</style>
